{# Feedback macros (pattern 6): what the page says back.

   Import what you need:

       {% from "components/macros/feedback.html" import empty_state, error_banner %}

   Toasts need no import: a route calls ``with_toast(response, "Saved")``
   and the region below, mounted once by base.html, shows it.
#}


{# The toast surface. htmx turns the ``HX-Trigger`` header into a ``toast``
   DOM event on the requesting element; it bubbles to the window and the
   Alpine ``toasts`` component (static/js/app.js) queues it. One region per
   page, fixed to the viewport, outside ``#app-content`` so it survives
   section swaps. Polite live region: announced, never interrupting. #}
{% macro toast_region() %}
<div id="toasts"
     x-data="toasts"
     @toast.window="push($event.detail)"
     aria-live="polite"
     class="fixed bottom-4 right-4 left-4 sm:left-auto z-50 flex flex-col gap-2 sm:max-w-sm">
  <template x-for="item in items" :key="item.id">
    <div role="status"
         x-transition:enter="transition-all duration-200"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition-opacity duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="bg-aegis-card border rounded-lg shadow-2xl px-4 py-3 flex items-center gap-3"
         :class="item.tone === 'error' ? 'border-aegis-error/40' : 'border-aegis-border'">
      <p class="flex-1 text-sm text-aegis-text" x-text="item.text"></p>
      <button type="button" @click="dismiss(item.id)" aria-label="Dismiss"
              class="shrink-0 text-aegis-muted/70 hover:text-aegis-text transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
  </template>
</div>
{% endmacro %}


{# What a list shows instead of nothing: what is missing and, optionally,
   what to do about it. Swap it in wherever a table or card grid would
   otherwise render zero rows. #}
{% macro empty_state(title, hint=None) %}
<div class="rounded-lg border border-dashed border-aegis-border px-6 py-10 text-center">
  <h2 class="text-sm font-medium text-aegis-text">{{ title }}</h2>
  {% if hint %}<p class="mt-1 text-xs text-aegis-muted">{{ hint }}</p>{% endif %}
</div>
{% endmacro %}


{# Form-level errors (pattern 1's 422 re-render). Renders nothing for an
   empty list, so a form template can call it unconditionally. #}
{% macro error_banner(errors) %}
{% if errors %}
<div role="alert" class="text-xs text-error bg-aegis-error/5 border border-aegis-error/40 rounded px-3 py-2">
  <ul class="{{ 'list-disc pl-4 space-y-0.5' if errors|length > 1 else '' }}">
    {% for error in errors %}<li>{{ error }}</li>{% endfor %}
  </ul>
</div>
{% endif %}
{% endmacro %}


{# An out-of-band sibling (pattern 2): rendered alongside a swapped row,
   htmx puts it wherever ``id`` lives on the page. Every counter a row
   action moves ships through this, so the shape is one. #}
{% macro oob(id, tag="span", class="") %}
<{{ tag }} id="{{ id }}" hx-swap-oob="true" {% if class %}class="{{ class }}"{% endif %}>{{ caller() }}</{{ tag }}>
{% endmacro %}